<template>
  <div class="app-container">
    <el-card class="topic-detail-container">
      <div slot="header" class="clearfix">
        <el-page-header @back="goBack" content="论坛主题详情">
        </el-page-header>
      </div>

      <div v-loading="loading">
        <!-- 用户信息区域 -->
        <div class="user-info">
          <div class="avatar-placeholder">
            <img v-if="topicData.avatar" :src="topicData.avatar" alt="用户头像" class="user-avatar-large">
            <i v-else class="el-icon-user-solid" style="font-size: 24px; color: #ccc;"></i>
          </div>
          <div class="user-details">
            <div class="username">用户{{ topicData.uid }}</div>
            <div class="create-time">{{ parseTime(topicData.createTime) }}</div>
          </div>
          <div class="topic-id">ID: {{ topicData.id }}</div>
        </div>

        <!-- 内容区域 -->
        <div class="content-section">
          <div class="content-text" v-html="topicData.content"></div>

          <!-- 图片展示区域 -->
          <div v-if="topicData.imgs && topicData.imgs.length > 0" class="image-gallery">
            <div
              v-for="(img, index) in topicData.imgs.split(',')"
              :key="index"
              class="image-item"
            >
              <image-preview
                :src="img"
                :width="80"
                :height="80"
              />
            </div>
          </div>
          <div v-else class="no-image">无图片</div>
        </div>

        <!-- 标签和统计数据 -->
        <div class="tags-and-stats">
          <div class="tag-section">
            <el-tag v-if="topicData.label">{{ topicData.label }}</el-tag>
          </div>

          <div class="stats-section">
            <div class="stat-item">
              <i class="el-icon-thumb"></i>
              <span>点赞：{{ topicData.greatNum || 0 }}</span>
            </div>
            <div class="stat-item">
              <i class="el-icon-chat-dot-round"></i>
              <span>回复：{{ topicData.replyNum || 0 }}</span>
            </div>
            <div class="stat-item">
              <i class="el-icon-warning-outline"></i>
              <span>举报：{{ topicData.reportNum || 0 }}</span>
            </div>
          </div>
        </div>

        <!-- 底部信息 -->
        <div class="bottom-info">
          <div class="status-section">
            <div class="status-item">
              <span class="status-label">删除状态：</span>
              <span :class="topicData.delFlag == 1 ? 'danger-text' : 'success-text'">
                {{ topicData.delFlag == 1 ? '已删除' : '正常' }}
              </span>
            </div>
            <div class="status-item">
              <span class="status-label">置顶状态：</span>
              <span :class="topicData.topStatus == 1 ? 'warning-text' : ''">
                {{ topicData.topStatus == 1 ? '置顶' : '未置顶' }}
              </span>
            </div>
          </div>

          <div class="time-section" v-if="topicData.topStatus == 1">
            <div class="time-item">
              <span class="time-label">置顶时间：</span>
              <span>{{ parseTime(topicData.topTime) }}</span>
            </div>
          </div>

          <div class="time-section">
            <div class="time-item">
              <span class="time-label">最后回复：</span>
              <span>{{ parseTime(topicData.lastReplyTime) }}</span>
            </div>
          </div>
        </div>

        <!-- 点赞列表 -->
        <el-card class="list-card">
          <div slot="header" class="clearfix">
            <span>点赞列表</span>
          </div>
          <el-table :data="greatList" style="width: 100%">
            <el-table-column label="用户" align="center">
              <template slot-scope="scope">
                <div class="user-info-inline">
                  <div class="avatar-placeholder-small">
                    <img v-if="scope.row.avatar" :src="scope.row.avatar" alt="用户头像" class="user-avatar-small">
                    <i v-else class="el-icon-user-solid" style="font-size: 16px; color: #ccc;"></i>
                  </div>
                  <span>{{ scope.row.name }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="点赞时间" align="center">
              <template slot-scope="scope">
                {{ parseTime(scope.row.createTime) }}
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="greatTotal > 0"
            :total="greatTotal"
            :page.sync="greatQueryParams.pageNum"
            :limit.sync="greatQueryParams.pageSize"
            @pagination="handleGreatPagination"
          />
        </el-card>

        <!-- 评论列表 -->
        <el-card class="list-card">
          <div slot="header" class="clearfix">
            <span>评论列表</span>
          </div>
          <el-table :data="commentList" style="width: 100%">
            <el-table-column label="用户" align="center" width="200">
              <template slot-scope="scope">
                <div class="user-info-inline">
                  <div class="avatar-placeholder-small">
                    <img v-if="scope.row.avatar" :src="scope.row.avatar" alt="用户头像" class="user-avatar-small">
                    <i v-else class="el-icon-user-solid" style="font-size: 16px; color: #ccc;"></i>
                  </div>
                  <span>{{ scope.row.name }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="content" label="评论内容" align="left" min-width="300">
              <template slot-scope="scope">
                <div class="comment-content" v-html="scope.row.content"></div>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="评论时间" align="center" width="180">
              <template slot-scope="scope">
                {{ parseTime(scope.row.createTime) }}
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="commentTotal > 0"
            :total="commentTotal"
            :page.sync="commentQueryParams.pageNum"
            :limit.sync="commentQueryParams.pageSize"
            @pagination="handleCommentPagination"
          />
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getTopic, topicGreatList, topicCommunicationList } from "@/api/forum/topic";
import ImagePreview from '@/components/ImagePreview'
import Pagination from '@/components/Pagination'

export default {
  name: "TopicDetail",
  components: { ImagePreview, Pagination },
  data() {
    return {
      loading: true,
      topicData: {},
      // 点赞列表相关数据
      greatList: [],
      greatTotal: 0,
      greatQueryParams: {
        pageNum: 1,
        pageSize: 10,
        topicId: null
      },
      // 评论列表相关数据
      commentList: [],
      commentTotal: 0,
      commentQueryParams: {
        pageNum: 1,
        pageSize: 10,
        topicId: null,
        type: null
      }
    }
  },
  created() {
    const topicId = this.$route.params.id || this.$route.query.id;
    if (topicId) {
      this.fetchTopicDetail(topicId);
      this.greatQueryParams.topicId = topicId;
      this.commentQueryParams.topicId = topicId;
      this.getGreatList();
      this.getCommentList();
    } else {
      this.$message.error("缺少主题ID参数");
      this.goBack();
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    fetchTopicDetail(id) {
      this.loading = true;
      getTopic(id).then(response => {
        this.topicData = response.data;
        this.loading = false;
      }).catch(error => {
        this.loading = false;
        this.$message.error("获取详情失败");
        this.goBack();
      });
    },
    /** 获取点赞列表 */
    getGreatList() {
      this.greatQueryParams.type = 0;
      topicGreatList(this.greatQueryParams).then(response => {
        this.greatList = response.rows;
        this.greatTotal = response.total;
      });
    },
    /** 获取评论列表 */
    getCommentList() {
      this.commentQueryParams.type = 1;
      topicCommunicationList(this.commentQueryParams).then(response => {
        this.commentList = response.rows;
        this.commentTotal = response.total;
      });
    },
    /** 点赞分页 */
    handleGreatPagination(val) {
      this.greatQueryParams.pageNum = val.page;
      this.greatQueryParams.pageSize = val.limit;
      this.getGreatList();
    },
    /** 评论分页 */
    handleCommentPagination(val) {
      this.commentQueryParams.pageNum = val.page;
      this.commentQueryParams.pageSize = val.limit;
      this.getCommentList();
    }
  }
}
</script>

<style scoped>
.topic-detail-container {
  padding: 0;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 20px;
  background: linear-gradient(120deg, #e0f7fa 0%, #bbdefb 100%);
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.avatar-placeholder {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-avatar-large {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-details {
  flex: 1;
}

.username {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 4px;
  color: #333;
}

.create-time {
  font-size: 14px;
  color: #666;
}

.topic-id {
  font-size: 14px;
  color: #666;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 2px 8px;
  border-radius: 12px;
}

.content-section {
  background: white;
  border-radius: 0;
  padding: 20px;
  margin-bottom: 0;
  min-height: 150px;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}

.content-text {
  line-height: 1.8;
  margin-bottom: 20px;
  white-space: pre-wrap;
  font-size: 16px;
  color: #333;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #eee;
}

.image-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.no-image {
  color: #999;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

.tags-and-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 20px;
  margin-bottom: 0;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}

.tag-section {
  display: flex;
  align-items: center;
}

.tag-section .el-tag {
  font-size: 14px;
  padding: 8px 12px;
}

.stats-section {
  display: flex;
  gap: 30px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
  padding: 8px 5px;
  border-radius: 6px;
  transition: background-color 0.3s;
}

.stat-item:hover {
  background-color: #f5f5f5;
}

.stat-item i {
  font-size: 20px;
  margin-bottom: 5px;
}

.stat-item .el-icon-thumb {
  color: #409EFF;
}

.stat-item .el-icon-chat-dot-round {
  color: #67C23A;
}

.stat-item .el-icon-warning-outline {
  color: #E6A23C;
}

.stat-item span {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.bottom-info {
  background: white;
  border-radius: 0 0 8px 8px;
  padding: 20px;
  border: 1px solid #eee;
  border-top: none;
}

.status-section {
  display: flex;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.status-item {
  margin-right: 25px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.status-label, .time-label {
  color: #666;
  margin-right: 8px;
  font-weight: 500;
}

.danger-text {
  color: #F56C6C;
  font-weight: 500;
}

.success-text {
  color: #67C23A;
  font-weight: 500;
}

.warning-text {
  color: #E6A23C;
  font-weight: 500;
}

.time-section {
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.time-item {
  display: flex;
  align-items: center;
  margin-right: 25px;
}

/* 点赞和评论列表样式 */
.list-card {
  margin: 20px;
}

.user-info-inline {
  display: flex;
  align-items: center;
}

.avatar-placeholder-small {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  overflow: hidden;
}

.user-avatar-small {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-content {
  line-height: 1.6;
  white-space: pre-wrap;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .tags-and-stats {
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-section {
    margin-top: 15px;
    width: 100%;
    justify-content: space-around;
  }

  .user-info {
    flex-wrap: wrap;
  }

  .topic-id {
    width: 100%;
    margin-top: 15px;
  }

  .status-section {
    flex-direction: column;
  }

  .status-item {
    margin-right: 0;
  }

  .list-card {
    margin: 10px 0;
  }
}
</style>
